define(
	[
		'require',
		'echarts',
		'echarts/chart/line',
		'zrender/tool/util'
	],
	function (require) {
		"use strict";

		var echarts = require('echarts');
		var zrUtil = require('zrender/tool/util');

		var forEach = Ember.EnumerableUtils.forEach;
		var map = Ember.EnumerableUtils.map;

		var RankView = Ember.Component.extend({
			dataKey: "",

			didInsertElement: function(){
				var $dom = this.$();

				this.width = this.width||$dom.width();
				this.height = this.height||$dom.height();

				if(this.width === 0 || this.height === 0){
					Ember.assert("必须指定视图的width和height。（可通过样式或width，height属性");
					return;
				}

				this.selectChange();

				this._initNormalChart();
			},

			selectChange: Ember.observer("select", function(){
				switch(this.get("select")){
					case "system/response_time/avg":
						this.set("fmtType", "transform_time");
						break;
					case "system/score/apdex":
						this.set("fmtType", undefined);
						break;
					case "network/bytes/total":
						this.set("fmtType", "transform_flow_mb");
						break;
					case "system/success/rate":
						this.set("fmtType", undefined);
						break;
					case "system/error/count":
						this.set("fmtType", undefined);
						break;
					case "system/user/unique":
						this.set("fmtType", undefined);
						break;
					case "system/throughput/total":
						this.set("fmtType", undefined);
						break;
				}
			}),

			_initNormalChart: function(){
				var $dom = this.$();
				var view = this;

				if(G_vmlCanvasManager && G_vmlCanvasManager.init){
					G_vmlCanvasManager.initElement($dom[0]);
				}

				$dom.empty();

				var type = this.type;

				var div = $('<div class="business-experience-rank-label">排序</div>');
				div.appendTo($dom);

				// var select = $('<select class="business-experience-rank-select"></select>');
				// if(overviewOrCenterSwitch == "business"){
				// 	var op1 = $('<option value ="business/score/apdex">Apdex</option>');
				// 	var op3 = $('<option value ="business/throughput/total">交易量</option>')
				// 	var op4	= $('<option value ="business/response_time/avg">交易响应时间</option>')
				// 	//var op2 = $('<option value ="system/score/apdex">应用性能指数</option>');
				// 	// var op3 = $('<option value ="network/bytes/total">流量</option>');
					
				// 	var op5 = $('<option value ="business/error/count">交易错误数</option>');
				// 	var op6 = $('<option value ="business/success/rate">交易成功率</option>');
				// }else{
				// 	var op1 = $('<option value ="system/score/apdex">Apdex</option>');
				// 	var op3 = $('<option value ="system/throughput/total">吞吐量</option>')
				// 	var op4	= $('<option value ="system/response_time/avg">系统响应时间</option>')
				// 	//var op2 = $('<option value ="system/score/apdex">应用性能指数</option>');
				// 	// var op3 = $('<option value ="network/bytes/total">流量</option>');
					
				// 	var op5 = $('<option value ="system/error/count">系统错误数</option>');
				// 	var op6 = $('<option value ="system/success/rate">系统成功率</option>');
				// }
				

				// select.append(op1);
				// //select.append(op2);
				// select.append(op3);
				// select.append(op4);
				// select.append(op5);
				// select.append(op6);
				// console.log(this.select);
				// select.val(this.select);
				// select.appendTo($dom).on("change",function(e){
				// 	view.sendAction("onChange", e.target.value, this);
				// });

				var text,
					value ;

				switch(this.select){
					case "business/score/apdex":
						text = "Apdex";
					break;
					case "business/throughput/total":
						text = "交易量";
					break;
					case "business/response_time/avg":
						text = "交易响应时间";
					break;
					case "business/success/rate":
						text = "交易成功率";
					break;
					case "business/error/count":
						text = "交易错误数";
					break;
					case "system/score/apdex":
						text = "Apdex";
					break;
					case "system/throughput/total":
						text = "吞吐量";
					break;
					case "system/response_time/avg":
						text = "系统响应时间";
					break;
					case "system/error/count":
						text = "系统错误数";
					break;
					case "system/success/rate":
						text = "系统成功率";
					break;
				}

				var triangleUp = $('<i class="select-triangle-up"></i>');
				var select = $('<div class="business-experience-rank-select" style="position:relative;line-height: 30px;padding-left:10px;color:#fff;float: left;z-index:1000;background:rgb(13, 89, 144);border:1px solid rgb(35, 101, 156);width:100px;border-radius:2px;"><span class="title">'+text+'</span></div>');
				var selectMenu = $('<div class="business-experience-rank-select-wrapper" style="position:absolute;display:none;left:0;top:31px;color:#fff;width:100%;line-height:20px;background:rgb(13, 89, 144);"></div>');
				if(overviewOrCenterSwitch == "business"){
					var op1 = $('<div value ="business/score/apdex" style="padding-left:10px;">Apdex</div>');
					var op3 = $('<div value ="business/throughput/total" style="padding-left:10px;">交易量</div>')
					var op4	= $('<div value ="business/response_time/avg" style="padding-left:10px;">交易响应时间</div>')
					//var op2 = $('<div value ="system/score/apdex">应用性能指数</div>');
					// var op3 = $('<div value ="network/bytes/total">流量</div>');
					
					var op5 = $('<div value ="business/error/count" style="padding-left:10px;">交易错误数</div>');
					var op6 = $('<div value ="business/success/rate" style="padding-left:10px;">交易成功率</div>');
				}else{
					var op1 = $('<div value ="system/score/apdex" style="padding-left:10px;">Apdex</div>');
					var op3 = $('<div value ="system/throughput/total" style="padding-left:10px;">吞吐量</div>')
					var op4	= $('<div value ="system/response_time/avg" style="padding-left:10px;">系统响应时间</div>')
					//var op2 = $('<div value ="system/score/apdex">应用性能指数</div>');
					// var op3 = $('<div value ="network/bytes/total">流量</div>');
					
					var op5 = $('<div value ="system/error/count" style="padding-left:10px;">系统错误数</div>');
					var op6 = $('<div value ="system/success/rate" style="padding-left:10px;">系统成功率</div>');
				}
				

				select.find(".business-experience-rank-select-wrapper .title").text(text);
				selectMenu.append(op1);
				//select.append(op2);
				selectMenu.append(op3);
				selectMenu.append(op4);
				selectMenu.append(op5);
				selectMenu.append(op6);
				select.append(selectMenu);
				select.append(triangleUp);

				select.appendTo($dom);
				select.on("click",function(event){
					$(".business-experience-rank-select-wrapper").show();
					event.stopPropagation();
				});
				$(document).on("click",function(){
					$(".business-experience-rank-select-wrapper").hide();
				});
				$dom.find(".business-experience-rank-select-wrapper div").on("click",function(e){
					var text = $(this).text();
					switch(text){
					case "Apdex":
						if(overviewOrCenterSwitch == "business"){
							value = "business/score/apdex";
						}else{
							value = "system/score/apdex";
						}	
					break;
					case "交易量":
						value = "business/throughput/total";
					break;
					case "交易响应时间":
						value = "business/response_time/avg";
					break;
					case "交易成功率":
						value = "business/success/rate";
					break;
					case "交易错误数":
						value = "business/error/count";
					break;
					case "吞吐量":
						value = "system/throughput/total";
					break;
					case "系统响应时间":
						value = "system/response_time/avg";
					break;
					case "系统错误数":
						value = "system/error/count";
					break;
					case "系统成功率":
						value = "system/success/rate";
					break;

					
				}
					// select.find("span").text($(this).text());
					view.sendAction("onChange", value, this);
					$(".business-experience-rank-select-wrapper").hide();
				});

				// var hr = $('<hr class="business-experience-rank-hr"/>');
				// hr.appendTo($dom);

				// var divArea;
				// if(type=="page") {
				// 	divArea = $('<div class="business-experience-rank-labelarea">性能一览</div>');
				// }else if(type=="area") {
				// 	divArea = $('<div class="business-experience-rank-labelarea">地域一览</div>');
				// }
				// divArea.appendTo($dom);

				var data = this.get('data')||[];

				var dataKey = this.get("select");
				var maxValue;
				if(data != undefined && data.length > 0) {

					maxValue = data[0][dataKey];
					if(dataKey=="system/success/rate"||dataKey=="business/success/rate")
						maxValue=100;
					if(dataKey=="system/score/apdex"||dataKey=="business/score/apdex"){
						maxValue=1;
					}
				}
				var cb = $('<div style="padding-top:60px;"></div>');

				var i = 0;
				forEach(data, function(performance,index){
					if(i < 20) {
						i++;
					}else {
						return;
					}
					//(index%2 == 0?"#66dc6b":"#03afff")
					var div1= $('<div style="position:absolute;height:25px;background-color:#03afff"></div>');

					var percent = performance[dataKey]/maxValue*100 + "%";
					div1.css('width',percent);
					var div2= $('<div style="position:absolute;line-height:25px;width:70%;color:#fff;height:25px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"></div>');
					var div3= $('<div style="position:absolute;right:0;line-height:25px;color:#fff;"></div>');


					if((dataKey == "system/success/rate")||(dataKey == "business/success/rate")){
						var data = APM.util.indicatorFormatter()(performance[dataKey])+"%";
					}else if(dataKey == "system/response_time/avg"||dataKey == "business/response_time/avg"){
						// var data = APM.util.indicatorFormatter("transform_time")(performance[dataKey]);
						var data = (performance[dataKey]/1000).toFixed(2)+'ms';
					}else{
						var data = performance[dataKey];
					}

					div3.text(data);

					var div = $('<div style="width:100%;background:rgba(0,0,0,0.25);height:25px;position:relative;cursor:pointer;margin-bottom: 5px;" class="business-experience-item"></div>');
					if(type=="page") {
						div2.text(performance.uri);
						div2.attr("title", performance.uri);
						var div4 = $('<div style="position:absolute;right:60px;line-height:25px;font-weight: bolder;"></div>');
						div4.text(performance.srcIp);
					} else if(type=="area") {
						div2.text(performance.name);
						div2.attr("title", performance.name);
					}

					div.append(div1);
					div.append(div2);
					div.append(div3);
					div.append(div4);

					div.on("click",'',performance, function(e){
						view.sendAction("itemClick", e.data, this);
					});

					div.appendTo(cb);
				});

				cb.appendTo($dom);
				cb.children().first().click();
			},
			
			dataChange: Ember.observer("data", function(){
				this._initNormalChart();
			})
		});

		APM.ui.Rank = RankView;

		return RankView;
	}
);